<template>
  <nav-header />
  <nav-main />
  <nav-footer />
  <!-- ref data -->
  <!-- <div>{{age}}</div>
  <div>{{name}}</div>
  <div>{{json}}</div>
  <div>{{array}}</div> -->

  <!-- reactive data -->
  <!-- <div>{{ data.age }}</div>
  <div>{{ data.name }}</div>
  <div>{{ data.json }}</div>
  <div>{{ data.array }}</div> -->

  <!-- reative toRefs -->
  <!-- <div>{{ age }}</div>
  <div>{{ name }}</div>
  <div>{{ json }}</div>
  <div>{{ array }}</div>

  <button @click="clickNumber">{{ number }}</button> -->

  <!-- <div>{{ num1 }}---{{ num2 }} >>sum: {{ sum }}</div>

  <button @click="changeNumber">change</button> -->
  <div>{{ list }}</div>
  <button @click="goto">about go!</button>
  <br />
  <button @click="goDouban">douban</button>
  <br />
  <start />
</template>

<script>
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
import NavHeader from "@/components/navHeader/NavHeader.vue";
import NavFooter from "@/components/navFooter/NavFooter.vue";
import NavMain from "@/components/navMain/NavMain.vue";
// 注意useStore属于 vuex 也就是状态管理的包
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import Start from "@/components/Start.vue";

export default defineComponent({
  name: "Home",
  props: {},
  components: {
    NavHeader,
    NavFooter,
    NavMain,
    Start,
  },
  setup(props, ctx) {
    // let age = ref(10);
    // let name = ref("jack");
    // let json = ref({name:'Alice',age:18})
    // let array = ref(['a','b','c','d'])

    let data = reactive({
      name: "jack",
      age: 2850000,
      json: { name: "Alice", age: 180 },
      array: ["a", "b", "c", "d"],
    });

    let number = ref(10);
    let clickNumber = () => {
      number.value += 1;
      alert("click number" + number.value);
    };

    let num1 = ref(1);
    let num2 = ref(2);
    let sum = computed(() => {
      return num1.value + num2.value;
    });
    let changeNumber = () => {
      num1.value = 10;
    };
    let store = useStore();
    let list = computed(() => {
      return store.state.list;
    });

    let objParam = ref({
      name: "Christina",
    });
    let router = useRouter();
    let goto = () => {
      // push(path) 跳转到具体的页面
      // back(1) 跳回上一页，可以指定深度
      // go(1) 下一页，指定深度
      // forward 下一页
      // router.push('/about')

      // 传递路由参数，需要路由push 对象
      router.push({
        path: "/detail",
        query: {
          name: "hello",
          object: JSON.stringify(objParam),
        },
      });
    };

    let goDouban = () => {
      router.push("/douban");
    };
    return {
      // num,
      // name,
      // json,
      // array
      // data,
      // ...toRefs(data),
      // clickNumber,
      // number,
      // num1,
      // num2,
      // sum,
      // changeNumber,
      list,
      goto,
      goDouban,
    };
  },
});
</script>

<style scoped lang="scss">
</style>